/* eslint-disable consistent-return */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, message } from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;
@connect(({ reducemp }) => ({
  nameList: reducemp.nameList,
}))
@Form.create()
class AttrModal extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  // 取消
  handleCancle = () => {
    const { form, onCancel } = this.props;
    onCancel();
    form.resetFields();
  };

  // 提交模态框数据
  submitModalData = () => {
    const { form, onOk } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (values.userPwd === values.newUserPwd) {
          return message.warning('新密码与原密码不能相同!');
        }
        if (values.newUserPwd !== values.confirmUserPwd) {
          return message.warning('确认密码与新密码输入不一致');
        }
        onOk(values);
      }
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      modalVisible,
      firstLoginFlag,
      loading,
    } = this.props;
    // 模态框布局
    const formItemLayoutModal = {
      labelCol: { md: { span: 5 } },
      wrapperCol: { md: { span: 17, offset: 1 } },
    };
    // 模态框配置
    const modalConfig = {
      title: <span>修改密码</span>,
      visible: modalVisible,
      onOk: this.submitModalData,
      okText: '确定',
      onCancel: this.handleCancle,
      keyboard: firstLoginFlag !== '1',
      closable: firstLoginFlag !== '1',
      maskClosable: firstLoginFlag !== '1',
      cancelButtonProps: { style: { display: firstLoginFlag === '1' ? 'none' : 'inline-block' } },
      confirmLoading: loading,
    };
    return (
      <Modal {...modalConfig}>
        <Form layout="horizontal">
          <FormItem {...formItemLayoutModal} label="原密码">
            {getFieldDecorator('userPwd', {
              rules: [{ required: modalVisible, message: '请输入' }],
            })(<Input placeholder="请输入" type="password" />)}
          </FormItem>
          <FormItem {...formItemLayoutModal} label="新密码">
            {getFieldDecorator('newUserPwd', {
              rules: [
                {
                  required: modalVisible,
                  message: '6～16位数字与字母组合',
                  min: 6,
                  max: 16,
                  pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
                },
              ],
            })(<Input placeholder="请输入" type="password" />)}
          </FormItem>
          <FormItem {...formItemLayoutModal} label="确认新密码">
            {getFieldDecorator('confirmUserPwd', {
              rules: [
                {
                  required: modalVisible,
                  message: '6～16位数字与字母组合',
                  min: 6,
                  max: 16,
                  pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
                },
              ],
            })(<Input placeholder="请输入" type="password" />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default AttrModal;
